<template>
  <div class="demo">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="150px"
      class="demo-ruleForm"
    >
      <el-form-item label="服务商性质" prop="serviceProviderNature">
        <el-radio-group
          v-model="ruleForm.serviceProviderNature"
          size="small"
          :disabled="status != 0 "
          @change="changeNature(ruleForm.serviceProviderNature)"
        >
          <el-radio :label="0">公司</el-radio>
          <el-radio :label="1">个人</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-row>基本信息</el-row>
      <div v-if="ruleForm.serviceProviderNature == 0">
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="企业名称" prop="name">
              <el-input v-model="ruleForm.name" size="small" :disabled="status == 1" maxlength="50"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="统一社会信用代码" prop="creditCode">
              <el-input
                v-model="ruleForm.creditCode"
                size="small"
                :disabled="status == 1"
                maxlength="18"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="法人姓名" prop="principal">
              <el-input v-model="ruleForm.principal" size="small" :disabled="status == 1" maxlength="20"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人" prop="linkName">
              <el-input v-model="ruleForm.linkName" size="small" :disabled="status == 1" maxlength="20"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="联系人手机号" prop="linkMobile">
              <el-input
                v-model="ruleForm.linkMobile"
                size="small"
                :disabled="status == 1"
                maxlength="11"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-form-item label="企业地址" prop="detailedAddress">
            <span
              v-if="status == 1"
            >{{`${ruleForm.province}-${ruleForm.city}-${ruleForm.district}-${ruleForm.detailedAddress}`}}</span>
            <template v-else>
              <v-distpicker
                @province="onProvince"
                @city="onCity"
                @area="onDistrict"
                :province="ruleForm.province"
                :city="ruleForm.city"
                :area="ruleForm.district"
                @selected="infoSelectChange()"
              ></v-distpicker>
              <el-input
                v-model="ruleForm.detailedAddress"
                maxlength="100"
                placeholder="详细地址（100字以内）"
                style="width: 400px"
                size="small"
              ></el-input>
            </template>
          </el-form-item>
        </el-row>
      </div>
      <div v-else>
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="姓名" prop="personName">
              <el-input v-model="ruleForm.personName" size="small" :disabled="status == 1" maxlength="20"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证号" prop="idcardNumber">
              <el-input
                v-model="ruleForm.idcardNumber"
                size="small"
                :disabled="status == 1"
                maxlength="18"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="手机号码" prop="linkMobile">
              <el-input
                v-model="ruleForm.linkMobile"
                size="small"
                :disabled="status == 1"
                maxlength="11"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-row :gutter="40" v-if="status != '0'">
          <el-col :span="8">
            <el-form-item label="服务商状态" prop="status">
              <span v-if="ruleForm.status == 0">启用</span>
              <span v-if="ruleForm.status == 1">禁用</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="服务商邀请码" prop="inviteCode">
              <el-input v-model="ruleForm.inviteCode" size="small" disabled maxlength="11"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <el-form-item v-if="status != 1">
        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
        <el-button @click="cancel()">取消</el-button>
      </el-form-item>
      <el-form-item v-else>
        <el-button type="primary" @click="cancel()">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import util from "@/util";
import { mapState } from "vuex";
import { provider, getProviderDetail } from "@/api";
import VDistpicker from "v-distpicker";
export default {
  name: "serviceProvider-details",
  computed: mapState(["merchantId", "token", "power"]),
  components: {
    VDistpicker: VDistpicker
  },
  data() {
    const validSocialCreditCode = (rule, value, callback) => {
      if (value && !util.validSocialCreditCode(value)) {
        return callback(new Error("格式不正确（18位数字或者大写英文字母）！"));
      } else {
        callback();
      }
    };
    const checkMobile = (rule, value, callback) => {
      if (!util.validMobilePhone(value)) {
        return callback(new Error("手机号格式不正确 "));
      } else {
        callback();
      }
    };
    const validIdentity = (rule, value, callback) => {
      if (!util.validIdentity(value)) {
        return callback(new Error("身份证号码格式不正确！"));
      } else {
        callback();
      }
    };

    return {
      ruleForm: {
        serviceType: 2,
        serviceProviderNature: 0,
        name: "", // 企业名称
        creditCode: "", //企业信用code
        principal: "", //法人姓名
        linkName: "", // 法人姓名
        linkMobile: "", // 联系人手机号
        province: "",
        city: "",
        district: "",
        detailedAddress: "",
        idcardNumber: "", // 法人身份证号/个人身份证号
        inviteCode: "", // 服务商邀请码
        status: "",
        personName: ""
      },
      rules: {
        serviceProviderNature: [],
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
        ], // 企业名称
        personName: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" }
        ],
        creditCode: [
          { required: true, message: "请输入社会代码", trigger: "blur" },
          { validator: validSocialCreditCode, trigger: "blur" }
        ], //企业信用code
        principal: [
          { required: true, message: "请输入法人姓名", trigger: "blur" },
          { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" }
        ], //法人姓名
        linkName: [
          { required: true, message: "请输入联系人姓名", trigger: "blur" },
          { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" }
        ], // 法人姓名
        linkMobile: [
          { required: true, message: "请输入联系人手机号", trigger: "blur" },
          { validator: checkMobile, trigger: "blur" }
        ], // 联系人手机号
        idcardNumber: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          { validator: validIdentity, trigger: "blur" }
        ], // 法人身份证号/个人身份证号\
        detailedAddress: [
          { required: true, message: "请输入企业地址", trigger: "blur" }
        ]
      },
      selectAdress: {
        selectedProvince: "",
        selectedCity: "",
        selectedDistrict: ""
      },
      status: "0", // 0-新增. 1-查看 2 - 编辑
      id: ""
    };
  },
  created() {
    this.id = util.getQuery().id; // 查看id
    this.status = util.getQuery().status;
  },
  mounted() {
    if (this.id) {
      this.getDetail(this.id);
    }
  },
  methods: {
    //选择区域
    changeNature(name) {
      this.ruleForm = {
        serviceType: 2,
        serviceProviderNature: 0,
        name: "", // 企业名称
        creditCode: "", //企业信用code
        principal: "", //法人姓名
        linkName: "", // 法人姓名
        linkMobile: "", // 联系人手机号
        province: "",
        city: "",
        district: "",
        detailedAddress: "",
        idcardNumber: "" // 法人身份证号/个人身份证号
      };
      this.ruleForm.serviceProviderNature = name;
    },
    onProvince(data) {
      this.selectAdress.selectedProvince = data.value;
    },
    onCity(data) {
      this.selectAdress.selectedCity = data.value;
    },
    onDistrict(data) {
      this.selectAdress.selectedDistrict = data.value;
    },
    //信息部分地址选择
    infoSelectChange() {
      this.ruleForm.province = this.selectAdress.selectedProvince;
      this.ruleForm.city = this.selectAdress.selectedCity;
      this.ruleForm.district = this.selectAdress.selectedDistrict;
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (
            (this.ruleForm.province == "" ||
            this.ruleForm.city == "" ||
            this.ruleForm.district == "") && this.ruleForm.serviceProviderNature == 0
          ) {
            this.$message.error("请选择企业地址");
          } else {
            this.submitProducer();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    submitProducer() {
      let data = this.ruleForm;
      if (this.ruleForm.serviceProviderNature == 1) {
        this.ruleForm.name = this.ruleForm.personName
      }
      delete data.personName
   
      data.shopId = this.merchantId;
      if (status == 1) {
        data.id = this.id;
      }
      provider(data).then(res => {
        if (res.code == 200) {
          util.routerTo(
            "/training-center/serviceProvider/serviceProvider-list"
          );
        }
      });
    },
    cancel() {
      util.routerTo("/training-center/serviceProvider/serviceProvider-list", {
        status: status
      });
    },
    getDetail(id) {
      getProviderDetail({ id: id }).then(res => {
        this.ruleForm = res.data;
        this.ruleForm.personName=res.data.name
      });
    }
  }
};
</script>


<style scoped>
.distpicker-address-wrapper {
  display: inline-block;
}
.distpicker-address-wrapper select {
  padding: 0 !important;
  height: 32px !important;
}
</style>
<style>
.demo .distpicker-address-wrapper select {
  padding: 0 !important;
  height: 32px !important;
  font-size: 14px;
}
</style>
